<script lang="ts" setup>
import { TITLE } from '@/config'
import Layout from '@/layouts/index.vue'
import { useUserStore } from '@/stores/auth'
import { usePortalStore } from '@/stores/portal'
import { useFavicon } from '@vueuse/core'
import { useHead } from '@vueuse/head'
import { has } from 'lodash-es'
import { computed, Ref, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute, useRouter } from 'vue-router'
import './App.scss'
import { Portal, useMyInfoQuery, usePortalQuery } from './generated/graphql'
import { useSiteSetting } from './hooks/siteSettings'

const userStore = useUserStore()
const portalId: Ref<string | undefined> = computed(() => userStore.user?.portal)
const portalStore = usePortalStore()
const portal = usePortalQuery({
  variables: {
    where: {
      id: portalId
    }
  }
})
watchEffect(() => {
  portalStore.portal = portal.data.value?.portal as Portal
})

const route = useRoute()

//动态设置网站标题和icon
const site = useSiteSetting()
const { locale } = useI18n()
useHead({
  title: computed(() => (site.siteSetting.value as any).head_tag[locale.value] || TITLE)
})
useFavicon(
  computed(() => {
    if (has(site.siteSetting.value.extends, 'favicon')) {
      return site.siteSetting.value.extends.favicon as string
    }
    return '/favicon.ico'
  })
)

/**
 * 检测用户是否被禁用
 */
const me = useMyInfoQuery()
const router = useRouter()

watchEffect(() => {
  // console.log(me.data.value);
  // sessionStorage.setItem("me",JSON.stringify(me.data.value))
  if (me.data.value?.me) {
    const enabled = me.data.value.me.enabled
    if (!enabled && route.name !== 'LOGIN') {
      userStore.M_logout()
      router.go(0)
    }
  }
})
</script>

<template>
  <div class=" w-full h-screen">
    <Layout></Layout>
  </div>
</template>
